<template>
  <view class="demo-load-more">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <scroll-view 
        class="list"
        scroll-y
        @scrolltolower="onLoadMore"
      >
        <view 
          v-for="item in list" 
          :key="item.id"
          class="list-item"
        >
          {{ item.text }}
        </view>
        
        <fu-load-more
          :loading="loading"
          :finished="finished"
          :error="error"
          @retry="onLoadMore"
        />
      </scroll-view>
    </view>
    
    <!-- 自定义文案 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义文案</view>
      <fu-load-more
        loading
        loading-text="努力加载中..."
      />
      <fu-load-more
        finished
        finished-text="我是有底线的"
      />
      <fu-load-more
        error
        error-text="网络开小差了，点击重试"
      />
    </view>
    
    <!-- 列表为空 -->
    <view class="demo-block">
      <view class="demo-block__title">列表为空</view>
      <scroll-view class="list list--empty" scroll-y>
        <view class="list-empty">
          <text class="list-empty__text">暂无数据</text>
        </view>
        <fu-load-more finished />
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      error: false,
      page: 1
    }
  },
  
  mounted() {
    this.loadData()
  },
  
  methods: {
    // 加载数据
    async loadData() {
      if (this.loading || this.finished) return
      
      this.loading = true
      this.error = false
      
      try {
        // 模拟异步请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 模拟数据
        const newItems = Array(10).fill(0).map((_, index) => ({
          id: this.list.length + index + 1,
          text: `列表项 ${this.list.length + index + 1}`
        }))
        
        this.list.push(...newItems)
        this.page++
        
        // 模拟数据加载完毕
        if (this.page > 3) {
          this.finished = true
        }
      } catch (e) {
        this.error = true
      } finally {
        this.loading = false
      }
    },
    
    // 触发加载更多
    onLoadMore() {
      this.loadData()
    }
  }
}
</script>

<style lang="scss">
.demo-load-more {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 8rpx;
  overflow: hidden;
  
  &__title {
    padding: 30rpx;
    font-size: 28rpx;
    color: #909399;
    border-bottom: 2rpx solid #f5f5f5;
  }
}

.list {
  height: 600rpx;
  background: #fff;
  
  &--empty {
    height: 300rpx;
  }
}

.list-item {
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.list-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &__text {
    color: #909399;
    font-size: 28rpx;
  }
}

// 自定义文案示例中的样式
.fu-load-more {
  margin: 20rpx 0;
  
  &:first-child {
    margin-top: 0;
  }
  
  &:last-child {
    margin-bottom: 0;
  }
}
</style> 